<template>
  <div class="cart_page">
    <!-- 打印区域 -->
    <div class="hello">
      <div id="printArea" class="cart_page">
        <!-- 打印区域 -->
        <table>
          <thead>
            <tr>
              <th style="width: 8%">
                <i
                  @click="checkAllFn"
                  :class="
                    checkAll
                      ? 'iconfont icon-yduifuxuankuangxuanzhong'
                      : 'iconfont icon-yduifuxuankuang'
                  "
                ></i>
              </th>
              <th style="width: 30%">礼品信息</th>
              <th>兑换分数</th>
              <th>数量</th>
              <th>小计 (鸡腿)</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in arr" :key="item.id">
              <!-- @click="$set(checkList, index, !checkList[index])" -->
              <!-- checkList[index] -->
              <td>
                <i
                  @click="checkedFn(item)"
                  :class="
                    item.isChecked
                      ? 'iconfont icon-yduifuxuankuangxuanzhong'
                      : 'iconfont icon-yduifuxuankuang'
                  "
                ></i>
              </td>
              <td>
                <section>
                  <img
                    width="84"
                    :src="imgBaseUrl + item.coverImg"
                    alt="列表图片"
                  />
                  <div class="info">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.versionDescription }}</p>
                  </div>
                </section>
              </td>
              <td>{{ item.coin }}</td>
              <td>
                <div class="step">
                  <span @click="stepFn(item, -1)">-</span>
                  <input type="text" v-model="item.total" />
                  <span @click="stepFn(item, 1)">+</span>
                </div>
              </td>
              <td>{{ item.coin * item.total }}鸡腿</td>
              <td>
                <span class="del" @click="delFn(item.id, index)">删除</span>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="total">
          总计：<span>{{ totalPrice }}鸡腿</span>
        </div>
      </div>
      <div class="submit">提交</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLoginStore } from "@/stores/login";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, toRefs, ref, getCurrentInstance } from "vue";
import { CartDelApi, shopCartsApi } from "../Api";
const { proxy } = getCurrentInstance() as any;
const imgBaseUrl = proxy.$imgUrl;
const checkAll = ref(true);
const arr = ref<({ isChecked?: Boolean } & IShop)[]>([]);
const checkList: any = [];
const totalPrice = ref(0);
//
let flag = ref(false);
const total = () => {
  // totalPrice.value
  totalPrice.value = arr.value.reduce((pre, cur) => {
    return cur.isChecked ? cur.coin * cur.total + pre : pre;
  }, 0);
};
const getData = () => {
  shopCartsApi().then((res) => {
    if (res.code == 0) {
      console.log(res.data);
      arr.value = res.data;
      arr.value = arr.value.map((item) => ({
        ...item,
        isChecked: true,
      }));
      //total
      total();
      // 全选判断
      checkAll.value = true;
      //全选判断
      arr.value.forEach((item) => {
        if (!item.isChecked || arr.value.length == 0) {
          checkAll.value = false;
          console.log("进来");
        }
      });
    }
  });
};
getData();
const stepFn = (item: IShop, val: number) => {
  if (val == -1 && item.total == 1) return;
  item.total += val;
  total();
};
const delFn = (id: number, num: number) => {
  ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    CartDelApi(id).then((res) => {
      if (res.code == 0) {
        console.log(res.data);
        ElMessage.success("删除成功");
        //重新渲染
        getData();
        //重载用户信息
        const loginStore = useLoginStore();
        //加入提示
        loginStore.isReMountedTaBBar++;
      }
    });
  });
};
const checkAllFn = () => {
  checkAll.value = !checkAll.value;
  arr.value.map((item) => (item.isChecked = checkAll.value));
  total();
};
const checkedFn = (item: { isChecked?: Boolean } & IShop) => {
  item.isChecked = !item.isChecked;
  // 全选判断
  checkAll.value = true;
  arr.value.forEach((item) => {
    if (!item.isChecked) {
      checkAll.value = false;
    }
  });
  total();
};
</script>
<style lang="less" scoped>
.cart_page {
  background: #fff;
  table {
    width: 100%;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    color: #666;
    border-collapse: collapse;
    font-size: 14px;
    thead {
      background: #f2f2f2;
      th {
        padding: 19px 0;
        .iconfont {
          cursor: pointer;
        }
        .icon-yduifuxuankuangxuanzhong {
          color: #0a328e;
        }
      }
    }
    tbody {
      tr {
        td {
          vertical-align: middle;
          text-align: center;
          padding: 19px 0;
          table-layout: fixed; // td的宽度固定，不随内容变化
          .iconfont {
            cursor: pointer;
          }
          .icon-yduifuxuankuangxuanzhong {
            color: #0a328e;
          }
          section {
            padding-left: 20px;
            display: flex;
            box-sizing: border-box;
            img {
              margin-right: 12px;
            }
            .info {
              padding-top: 20px;
              flex: 1;
              overflow: hidden;
              box-sizing: border-box;
              text-align: left;
              h5 {
                overflow: hidden;
                color: #333;
                font-size: 18px;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 20px;
              }
              p {
                color: #666;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .step {
            width: 106px;
            height: 32px;
            margin: auto;
            span {
              float: left;
              width: 30px;
              height: 32px;
              display: block;
              border: solid 1px #d1d1d1;
              font-size: 20px;
              box-sizing: border-box;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 0px;
              color: #999999;
              text-align: center;
              cursor: pointer;
              background: #fff;
            }
            input {
              box-sizing: border-box;
              width: 46px;
              height: 32px;
              float: left;
              text-align: center;
              font-size: 14px;
              line-height: 23px;
              letter-spacing: 0px;
              color: #666666;
              border: 0;
              border-top: 1px solid #d1d1d1;
              border-bottom: 1px solid #d1d1d1;
              background: #fff;
            }
          }
          .del {
            border: 1px solid #ececec;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            &:hover {
              color: #fff;
              background: #0a328e;
            }
          }
        }
      }
    }
  }
  .total {
    padding: 30px 0;
    text-align: right;
    font-size: 22px;
    span {
      font-weight: bold;
      color: #fd604d;
    }
  }
  .submit {
    width: 175px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: SourceHanSansSC-Light;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    cursor: pointer;
    background-color: #0a328e;
    float: right;
  }
}
</style>
